<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="./css/baseCss.css">
	<title>个人中心</title>
	<style type="text/css">
		
		body{
			min-width: 1200px;
			background-color: #f7f7f7;
		}
		header{
			background-color: #fff;
		}
		.centerBg{
			height: 310px;
		}
		.centerEve{
			width: 1200px;
			margin: 0 auto;
		}
		/*列表头*/
		.examInc{
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 1200px;
			color: #303030;
			bottom: 0;
		}
		.examAdmin{
			color: #fff;
    		margin-bottom: 35px;
    		overflow: auto;
    		font-size: 15px;
    		border-radius: 10px;
    		background: rgba(255,255,255,0.2);
    		padding: 15px 0;
		}
		.examAdmin_root{
			float: left;
    		margin-left: 75px;
    		width: 120px;
    		height: 120px;
    		position: relative;
    		border: 4px solid #fff;
    		border-radius: 300px;
		}
		.examAdmin_root img{
			width: 106%;
    		height: 105%;
    		border-radius: 200px;
    		position: absolute;
    		top: -3px;
    		left: -3px;
		}
		.examAdmin_list{
			float: left;
    		margin-left: 75px;
    		padding-top: 25px;
		}
		.examAdmin_eve{
			margin-bottom: 10px;
		}
		.examAdmin_title{
			margin-right: 42px;
    		position: relative;
		}
		.examAdmin_title:before{
			content: "";
   			position: absolute;
   			width: 1px;
   			height: 15px;
   			background-color: #fff;
   			right: -21px;
   			top: 4px;
		}
		.examCon{
			background-color: #fff;
			height: 90px;
			border-bottom: 1px solid #dddddd;
			display: flex;
			font-size: 15px;
			justify-content: space-evenly;
		}
		.examCon > div{
			width: auto;
    		text-align: center;
		}
		.examCon .examCon_tar{
			border-bottom: 2px solid #333333;
		}
		.examCon_num{
			padding: 20px 0 10px 0;
    		font-weight: 600;
		}
		/*列表修改样式*/
		.professInc{
			padding: 0;
			padding-top: 40px;
		}
		.professEve{
			margin-top: 0;
		}

		.centerPage{
			text-align: center;
			background-color: #f7f7f7;
			padding: 40px 0;
		}

		/*消息样式*/
		.message{
			padding: 40px;
    		box-sizing: border-box;
    		background-color: #fff;
    		/*height: 1200px;*/
		}
		.message_text{
			background-color: #f9f9f9;
			padding: 40px;
		}
		.message_text textarea{
			width: 100%;
    		resize: none;
    		border: 1px solid #dddddd;
    		height: 180px;
    		padding: 20px;
    		box-sizing: border-box;
    		color: #343434;
    		font-size: 15px;
		}
		.message_text .blueBtn{
			height: 40px;
    		width: 290px;
    		margin-top: 20px;
		}
		.message_eve{
			padding: 20px 0;
    		font-size: 14px;
    		display: flex;
    		color: #343434;
    		border-bottom: 1px solid #dddddd;
		}
		.message_eveImg{
			width: 40px;
			height: 40px;
		}
		.message_eveCon{
			margin-left: 10px;
			width: 100%;
		}
		.message_eveTit{
			color: #979797;
			margin-bottom: 3px;
		}
	</style>
</head>

<body>
<div class ="wrapper">
	<div id="example" class="content">
		<all-header></all-header>
		<section id="center">
			<div class="centerBg">
				<img class="imgBai" src="./img/bg04.jpg">
				<div class="examInc">
					<div class="examAdmin">
						<!--<div class="examAdmin_root"><img :src="loginInfo.info.photo"></div>-->
						<div class="examAdmin_list">
							<div class="examAdmin_eve">
								<span class="examAdmin_title">姓名</span>
								<span>{{loginInfo.info.name}}</span>
							</div>
							<div class="examAdmin_eve">
								<span class="examAdmin_title">专业</span>
								<span>{{loginInfo.info.majorName}}</span>
							</div>
							<div class="examAdmin_eve">
								<span class="examAdmin_title">年级</span>
								<span>{{loginInfo.info.gradeName}}</span>
							</div>
						</div>
						<div class="examAdmin_list">
							<div class="examAdmin_eve">
								<span class="examAdmin_title">学生号</span>
								<span>{{loginInfo.info.stuNo}}</span>
							</div>
							<!--<div class="examAdmin_eve">
								<span class="examAdmin_title">手机号</span>
								<span>{{loginInfo.info.mobile}}</span>
							</div>-->
						</div>
					</div>
					
					<div class="examCon">
						<div class="examCon_tar" @click="examSw($event,'0')">
							<div class="examCon_num">{{zkcCnt}}</div>
							<div>本学期课程</div>
						</div>
						<div @click="examSw($event,1)">
							<div class="examCon_num">{{xxzCnt}}</div>
							<div>学习中</div>
						</div>
						<div @click="examSw($event,2)">
							<div class="examCon_num">{{yksCnt}}</div>
							<div>本学期学习成绩</div>
						</div>
						<div @click="examSw($event,3)">
							<div class="examCon_num">{{messageList.totalElements}}</div>
							<div>消息</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="profess centerEve" :class="[isinfor ? 'disnone' : 'disblock']">
			<div class="professOutinc centerEveCon_inc">
				<div class="professInc centerConInc">
					<pro-fessional v-for="(proCourse,index) in students" :index="index" :id="proCourse.id" :name="proCourse.name" :introduce="proCourse.introduce" :photo="proCourse.photo" :stutype="proCourse.searchType"></pro-fessional>
				</div>
			</div>
			<div class="centerPage">
				<div id='page'></div>
			</div>
		</section>
		<section class="centerEve message" :class="[isinfor ? 'disblock' : 'disnone']">
			<div class="message_text">
				<div><textarea id="createMess" placeholder="请输入文本信息..."></textarea></div>
				<div><button @click="createMessage" class="blueBtn">提交</button></div>
			</div>
			<div class="messageInc content">
				<div class="message_eve" v-for="message in messageList.content">
					<div class="message_eveImg"><img class="imgBai" :src="message.photo"></div>
					<div class="message_eveCon" v-if="message.sendUserType==1">
						<div class="message_eveTit"><span>{{message.sendUserName}}</span><span class="right">{{crDate(message.createdDate.epochSecond)}}</span></div>
						<div>{{message.content}}</div>
					</div>
					<div class="message_eveCon" v-else-if="message.sendUserType==2">
						<div class="message_eveTit"><span>{{message.sendUserName}}</span><span class="right">{{crDate(message.createdDate.epochSecond)}}</span></div>
						<div>{{message.content}}</div>
					</div>
				</div>
			</div>
		</section>
		<all-footer></all-footer>
	</div>
</div>
</body>

<script type="text/javascript" src="./js/jquery.min.js"></script>

<script type="text/javascript" src="./js/httpUnit.js"></script>
<!--<script type="text/javascript" src="./js/bscroll.js"></script>-->
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./component/allHeader.js"></script>
<script type="text/javascript" src="./component/allFooter.js"></script>
<script type="text/javascript" src="./component/professional.js"></script>
<script type="text/javascript" src="./js/initPage.js"></script>
<script type="text/javascript">
    videoVue();

	//首页Vue函数
	function videoVue() {
        var allheader = allHeader();
	    var allfooter = allFooter();
        var professional = proFessional();
        var vm = new Vue({
            el: '#example',
            data: {
                loginInfo:"",
                students:"",
                zkcCnt:0,
                xxzCnt:0,
                yksCnt:0,
                messageList:"",//学生消息列表
                isinfor:false, //判断是否显示消息页面
                epochSecond:"",//每个消息的创建时间毫秒值
                page:0,//当前消息页数
                scroll:""//滚动对象
			},
			mounted:function () {
				//this.$nextTick(function () {
					this.examSw();//切换考试中心列表
				//});


				this.studentMessageList();//学生消息列表
				setTimeout(function(){
					vm.getUserinfo();
				},1000);
				
            },
			methods:{
				//格式化消息创建时间
				crDate:function(dates){
					function ifzero(value){
						if(value<10){
							return "0"+value;
						}else{
							return value;
						}
					}

					var date = new Date(dates*1000);
					var year = date.getFullYear();

					var month = date.getMonth()+1;
					var day = date.getDate();
					month =ifzero(month);
					day =ifzero(day);
					var hour = date.getHours();
					hour =ifzero(hour);
					var minute = date.getMinutes();
					minute =ifzero(minute);
					var second = date.getSeconds();
					second =ifzero(second);
					return year+"-"+month+"-"+day+"  "+hour+":"+minute+":"+second;
				},
				//获取用户信息
				getUserinfo:function(){
                    this.loginInfo = JSON.parse(sessionStorage.getItem("loginInfo"));
					console.log(this.loginInfo);
				},
                //获取考试中心列表(分页)
                studentsSub:function(page,isSw){

                    if(page==""||page==undefined||page==null){
                        page = 0;
					}
					var searchType = this.searchType;
                    var size = 8;
                    var sort = "id,asc";
                    var obj = JSON.stringify({
                        "searchType": searchType
                    });
                    httpHelperpost("/api/subjects/studentSubjects?page="+page+"&size="+size+"&sort="+sort, obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            // console.log(response);

                            if(value.code == 0){
                                vm.students = value.data.list.content;
                                vm.zkcCnt = value.data.zkcCnt;
                				vm.xxzCnt = value.data.xxzCnt;
                				vm.yksCnt = value.data.yksCnt;
                                
                                console.log("查询成功");
								setTimeout(function(){
									if($("#page").text()==""){
										vm.pageCha(value.data.list.totalElements);//初始化分页插件
									}
									if(isSw==true){
										$("#page").html("");
										vm.pageCha(value.data.list.totalElements);//初始化分页插件
									}
								},1000);
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                                alert(value.message);
                                console.log("查询失败");
                            }
                        }else {}
                    });
				},
				//创建消息
                createMessage:function(){
                    var content = $("#createMess").val();
                    if(content==""||content==null||content==undefined){
                    	alert("请输入消息内容");
                    }else{
                    	var obj = JSON.stringify({
                    	    "content": content
                    	});
                    	httpHelperpost("/api/messages/createMessage", obj, function(isSuccess, data) {
                    	    if (isSuccess == true) {
                    	        var response = data.responseText;
                    	        var value = JSON.parse(response);
	
                    	        // console.log(response);
	
                    	        if(value.code == 0){
                    	            
                    	            console.log("创建成功");
                    	            vm.messageList = "";
                    	            vm.page = 0;
                    	            vm.betterScroll();
                    	            vm.studentMessageList();
                    	            
                    	            $("#createMess").val("");
                    	            alert("提交成功");
                    	        }else if(value.code==401){
                    	            alert(value.message);
                    	            window.location.href='./login.html';
                    	        }else{
                    	            alert(value.message);
                    	            console.log("创建成功");
                    	        }
                    	    }else {}
                    	});
                    }   
				},
				//学生消息列表
				studentMessageList:function(){
                    
                    var obj = JSON.stringify({
                        "searchType": 1
                    });
                    var sort = "created_date,desc";
                    var page = this.page;
                    var size = 30;
                    httpHelperpost("/api/messages/studentMessageList?sort="+sort+"&page="+page+"&size="+size, obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            // console.log(response);

                            if(value.code == 0){
                                
                                console.log("查询成功");
                                if(vm.messageList==""){
                                	vm.messageList = value.data;
                                }else{
                                	if(value.data.content==""){
                                		$(window).unbind("scroll");
                                	}else{
                                		vm.messageList.content = vm.messageList.content.concat(value.data.content);
                                	}
                                }
                                // console.log("page:"+page);
                                vm.page = vm.page+1;
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                                alert(value.message);
                                console.log("查询成功");
                            }
                        }else {}
                    });
				},
				//切换考试顶部
				examSw:function(that,index){
                    if(index==undefined||index==null||index==""){
                        this.searchType = 0;
					}else{
                        $(that.currentTarget).addClass("examCon_tar").siblings().removeClass("examCon_tar");
                        this.searchType = index;
					}

					if(index==3){
						this.isinfor = true;
						this.betterScroll();
					}else{
						this.isinfor = false;
						$(window).unbind("scroll");
						this.studentsSub(null,true);//获取考试中心列表(分页)
					}
                    
				},
                //初始化分页插件
              	pageCha:function (totalCount) {
                  	pageUtil.initPage('page',{
                      	totalCount:totalCount,//总页数，一般从回调函数中获取。如果没有数据则默认为1页
                      	curPage:1,//初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
                      	showCount:9,//分页栏显示的数量
                      	pageSizeList:[10,20,50,100],//自定义分页数，默认[5,10,15,20,50]
                      	defaultPageSize:12,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
                      	isJump:true,//是否包含跳转功能，默认false
                      	isPageNum:false,//是否显示分页下拉选择，默认false
                      	isPN:true,//是否显示上一页和下一面，默认true
                      	isFL:false,//是否显示首页和末页，默认true
                      	jump:function(curPage,pageSize){//跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
							vm.studentsSub(curPage-1,false);
                      	},
                  	});
              	},
              	//滚动功能
                betterScroll:function(){
                	$(window).scroll(function() {
						var scrollTop = $(document).scrollTop();//滚动条距离页面顶部距离
						var offsetHeight = $(document).height();//当前页面高度(包括滚动页面)
						var clientHeight = $(this).height();//当前页面高度(不包括滚动页面)
						var bottomHeight = scrollTop-(offsetHeight-clientHeight);
						if(bottomHeight==0){
							vm.studentMessageList();
						}
					});
                },
                GetRequest:function () {
                    var url = location.search; //获取url中"?"符后的字串
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
                        }
                    }
                    return theRequest;
                }
			},
            components: {
                'all-header': allheader,
                'all-footer': allfooter,
                'pro-fessional':professional
            }
        })
    }
</script>

</html>